<template>
  <view class="uni_box home">
    <navbar title="我的直播" :yin="true"> </navbar>
    <view class="content">
      <u-sticky :offset-top="BarHeight()" h5-nav-height="44" :enable="false">
        <view class="leiview">
          <view
            class="leiitem"
            :class="item.id == headtype.id ? 'leiactive' : ''"
            v-for="(item, index) in head"
            :key="index"
            @click="headClick(item)"
            >{{ item.name }}</view
          >
        </view>
      </u-sticky>
      <view class="olist">
        <view
          class="oitem"
          v-for="(item, index) in list"
          :key="index"
          @click="openLive(item)"
        >
          <view class="dtwo">
            <image :src="item.teacher_image" class="listimg" mode=""></image>
            <view class="dright">
              <text class="name">{{ item.title }}</text>
              <view class="jview">
                <text class="shu">直播开始时间：{{ item.time }}</text>
                <text class="shu"
                  ><text class="qian">{{ item.free_text }}</text
                  >{{ item.teacher_name }}</text
                >
              </view>
              <view class="zong">
                <text class="yuyue">已预约</text>
                <view class="btn" @click="getkexi(item)">{{
                  item.button_text
                }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { loginLive } from "../../../utils/liveApp";
export default {
  data() {
    return {
      head: [],
      headtype: {},
      list: [],
      page: 1,
      limit: 10,
      last_page: 1,
      status: "loadmore",
    };
  },
  onLoad() {
    this.gethead();
  },
  onShow() {},
  onReachBottom: function () {
    this.loadmore();
  },
  methods: {
    async openLive(item) {
      // h5
      // #ifdef H5
      this.navrouter(`/pages_subject/live/index?id=${item.id}`);
      // #endif
      // #ifdef APP
      const res = await this.$u.api.getZhiboDetail({
        id: item.id,
      });
      loginLive("C907590113F5A48D9C33DC5901307461", "677D7D6D589120DA");
      // #endif
    },
    getkexi(item) {
      // this.navrouter("/pages_subject/twoPage/TiPage/KePractice");
    },
    async gethead() {
      let res = await this.$u.api.getZhiboType({});
      let head = [];
      let shuju = res;
      for (let i in shuju) {
        let a = {};
        a.name = shuju[i];
        a.id = i;
        head.push(a);
      }
      this.head = head;
      this.headtype = this.head[0];
      this.getList();
    },
    async getList() {
      let res = await this.$u.api.usergetZhiboList({
        page: this.page,
        type_id: this.headtype.id,
      });
      this.last_page = res.lastpage;
      let list = res.list;
      this.list = this.page == 1 ? list : [...this.list, ...list];
      if (this.page >= this.last_page) {
        this.status = "nomore";
      }
    },
    loadmore() {
      let page = this.page;
      // let last_page = this.last_page;
      if (this.status == "loadmore") {
        this.page++;
        this.getList();
      }
    },
    getClear() {
      this.list = [];
      (this.page = 1), (this.status = "loadmore");
      this.getList();
    },
    headClick(item) {
      this.headtype = item;
      this.getClear();
    },
  },
};
</script>

<style lang="scss" scoped>
page {
  background-color: #fff;
}
.content {
  background-color: #fff;
  // padding-bottom: 150rpx;
  .leiview {
    padding: 20rpx 30rpx;
    background-color: #fff;
    z-index: 100;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-bottom: 2rpx solid #f6f7fb;
    .leiitem {
      height: 66rpx;
      background: #aaaaaa;
      border-radius: 33rpx;
      width: 46%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 28rpx;
      color: #ffffff;
    }
    .leiactive {
      background: #e8433a;
      color: #fff;
    }

    // margin-top:  calc(var(--window-top));
  }
  .olist {
    display: flex;
    flex-direction: column;
    padding-bottom: 50rpx;
    // padding-top: 80rpx;
    .oitem {
      padding: 20rpx 30rpx;
      border-bottom: 18rpx solid #f6f7fb;
      .done {
        display: flex;
        flex-direction: row;
        align-items: center;
        flex-direction: row;
        margin-bottom: 20rpx;
      }
      .dinname {
        font-weight: 500;
        font-size: 28rpx;
        color: #333333;
      }
      .ztai {
        margin-left: auto;
        font-weight: bold;
        font-size: 22rpx;
        color: #14a1f2;
      }
      .dtwo {
        // background: #F5F5F5;
        // border-radius: 10rpx;
        padding: 10rpx;
        display: flex;
        flex-direction: row;
        .listimg {
          width: 212rpx;
          height: 136rpx;
          border-radius: 8rpx;
          margin-right: 10rpx;
        }
        .dright {
          display: flex;
          flex: 1;
          flex-direction: column;
          padding: 15rpx 15rpx 10rpx 10rpx;
          .name {
            font-weight: 500;
            font-size: 22rpx;
            color: #333333;
          }
          .jview {
            display: flex;
            margin-top: 10rpx;
            flex-direction: column;
            // align-items: center;
            align-items: flex-start;
            .qian {
              font-weight: 500;
              font-size: 22rpx;
              color: #e8433a;
              display: inline-block;
              margin-right: 10rpx;
            }
            .shu {
              // margin-left: auto;
              font-weight: 400;
              font-size: 20rpx;
              color: #999999;
              margin-top: 5rpx;
              display: block;
            }
          }
          .dintime {
            margin-top: auto;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 20rpx;
            color: #999999;
          }
        }
      }
    }
  }
  .zong {
    display: flex;
    align-items: center;
    margin-top: 14rpx;
    // margin: 23rpx 0 0;
    // justify-content: flex-end;
    .yuyue {
      font-weight: 500;
      font-size: 18rpx;
      color: #e8433a;
    }
    .zongtit {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 18rpx;
      color: #aaaaaa;
    }
    .zonnum {
      color: #e8433a;
    }
    .btn {
      padding: 5rpx 30rpx;
      border-radius: 32rpx;
      background: linear-gradient(-90deg, #fa4e4e, #fd894f);
      // border: 2rpx solid #AAAAAA;
      margin-left: 20rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 20rpx;
      color: #fff;
      margin-left: auto;
    }
  }
}
</style>
